<template>
  <div>
    <div class="user-info-wrapper">
      <div class="avatar-wrapper">
        <img alt="" :src="userInfo.avatar" />
      </div>
      <div class="info-wrapper">
        <span class="name">{{ userInfo.nickname }}</span>
        <span class="badge" v-if="userInfo.user_type == 2">{{ userInfo.level.name }}</span>
        <span v-if="userInfo.title" class="info">{{ userInfo.title }}</span>
        <span class="info">{{ userInfo.answer_count }} 回答 &nbsp;&nbsp;{{ userInfo.fans_count }} 粉丝</span>
      </div>
      <div class="edit-wrapper" @click="editInfo">
        <img alt="" src="../../assets/icon/icon_edit.png">
        <span>编辑</span>
      </div>
    </div>
    <div class="items-wrapper">
      <van-cell-group>
        <van-cell to="/wallet" icon="gold-coin" title="我的钱包" isLink>
          <template>
            <span>余额</span>
            <span class="van-cell__value--enhance">￥{{ userInfo.balance }}</span>
          </template>
        </van-cell>
        <van-cell v-if="userInfo.user_type==2" to="/painting/my" icon="records" title="我的作品" value="我发布的作品" isLink/>
        <van-cell to="/dianping/my" icon="question" title="我的问答" value="提问、回答与邀约" isLink/>
        <van-cell to="/favorite/my" icon="like-o" title="我的收藏" value="收藏的作品" isLink/>
        <!--
        <van-cell to="/follower" icon="contact" title="我的好友" value="我的粉丝和关注" isLink/>
        -->
      </van-cell-group>
    </div>

    <div class="items-wrapper">
      <van-cell-group>
        <van-cell to="/auth" icon="certificate" title="认证中心" value="学生/点评师认证" isLink/>
        <van-cell to="/invite" icon="share" title="邀请好友" value="邀请好友赢大奖" isLink/>
        <!--
        <van-cell icon="contact" title="联系客服" value="工作时间9:00~17:00" isLink/>
        -->
        <van-cell to="/help/list" icon="question" title="帮助中心" value="常见问题及解答" isLink/>
        <van-cell to="/feedback" icon="edit" title="问题反馈" value="有问必答" isLink/>
        <van-cell to="/setting" icon="setting" title="系统设置" value="系统设置" isLink/>
      </van-cell-group>
    </div>

    <div class="footer-placeholder">
    </div>
    <footer-bar page="me"></footer-bar>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'
import FooterBar from '@/components/footerBar'

import { mapGetters } from 'vuex'

Vue.component(FooterBar.name, FooterBar)

export default {
  name: 'Me',
  data () {
    return {
    }
  },
  created () {
    this.syncUser()
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    syncUser() {
      var that = this
      var url = '/users/' + this.userInfo.id + '/'
      // 调用获取用户信息接口
      this.axios.get(url)
      .then(function (res) {
        console.log(res)
        if (res.status === 200) {
          var payload = { 'userInfo': res.data, 'token': res.data.token, 'openId': res.data.openid }
          that.$store.dispatch('login', payload)
        }
      })
    },
    editInfo: function() {
      this.$router.push('/setting/info')
    }
  }
}

</script>

<style lang="scss">
</style>
